<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  <title>网页自动换肤 | 崔永华的个人网站</title>
  <meta name="keywords" content=" 前端 , 前端案例 ">
  <meta name="description" content="网页自动换肤 | 崔永华的个人网站">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="分类">
<meta property="og:url" content="http://cuiyonghua.com/categories/index.html">
<meta property="og:site_name" content="崔永华的个人网站">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2020-07-04T03:30:52.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="分类">


<link rel="icon" href="/img/avatar.jpg">

<link href="/css/style.css?v=1.1.0" rel="stylesheet">

<link href="/css/hl_theme/atom-dark.css?v=1.1.0" rel="stylesheet">

<link href="//cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" rel="stylesheet">

<script src="//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<script src="/js/titleTip.js?v=1.1.0"></script>

<script src="//cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

<script src="//cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js"></script>



<script src="//cdn.jsdelivr.net/npm/jquery.cookie@1.4.1/jquery.cookie.min.js"></script>

<script src="/js/iconfont.js?v=1.1.0"></script>

</head>
<div style="display: none">
  <input class="theme_disqus_on" value="false">
  <input class="theme_preload_comment" value="undefined">
  <input class="theme_blog_path" value>
  <input id="theme_shortcut" value="true">
  <input id="theme_highlight_on" value="true">
  <input id="theme_code_copy" value="true">
</div>



<body>
<aside class="nav">
    <div class="nav-left">
        <a href="/"
   class="avatar_target">
    <img class="avatar"
         src="/img/avatar.jpg"/>
</a>
<div class="author">
    <span>崔永华</span>
</div>

<div class="icon">
    
        
            <a title="csdn"
               href="https://cuiyonghua.blog.csdn.net/"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-csdn"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="github"
               href="https://github.com/cuiyonghua6"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-github"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="weibo"
               href="https://weibo.com/cuiyonghua"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-weibo"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="zhihu"
               href="https://www.zhihu.com/people/cuiyonghua"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-zhihu"></use>
                    </svg>
                
            </a>
        
    
        
            <a title="oschina"
               href="https://my.oschina.net/cuiyonghua"
               target="_blank">
                
                    <svg class="iconfont-svg" aria-hidden="true">
                        <use xlink:href="#icon-oschina"></use>
                    </svg>
                
            </a>
        
    
</div>




<ul>
    <li>
        <div class="all active" data-rel="全部文章">全部文章
            
                <small>(6)</small>
            
        </div>
    </li>
    
        
            
                <li>
                    <div data-rel="爬虫">
                        <i class="fold iconfont icon-right"></i>
                        
                        爬虫
                        <small>(3)</small>
                        
                    </div>
                    
                        <ul class="sub hide">
                            
                                <li>
                                    <div data-rel="爬虫<--->爬虫总结">
                                        
                                        爬虫总结
                                        
                                            <small>(3
                                                )</small>
                                        
                                    </div>
                                    
                                </li>
                            
                        </ul>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="前端">
                        <i class="fold iconfont icon-right"></i>
                        
                        前端
                        <small>(1)</small>
                        
                    </div>
                    
                        <ul class="sub hide">
                            
                                <li>
                                    <div data-rel="前端<--->前端案例">
                                        
                                        前端案例
                                        
                                            <small>(1
                                                )</small>
                                        
                                    </div>
                                    
                                </li>
                            
                        </ul>
                    
                </li>
            
        
    
        
            
                <li>
                    <div data-rel="其它">
                        <i class="fold iconfont icon-right"></i>
                        
                        其它
                        <small>(2)</small>
                        
                    </div>
                    
                        <ul class="sub hide">
                            
                                <li>
                                    <div data-rel="其它<--->工具">
                                        
                                        工具
                                        
                                            <small>(2
                                                )</small>
                                        
                                    </div>
                                    
                                </li>
                            
                        </ul>
                    
                </li>
            
        
    
        
            
        
    
        
            
        
    
        
            
        
    
</ul>
<div class="left-bottom">
    <div class="menus">
        
            
            
            
    </div>
    <div>
        
            <a class="about  hasFriend  site_url"
               
               href="/about">关于</a>
        
        <a style="width: 50%"
                
                                           class="friends">友链</a>
        
    </div>
</div>
<input type="hidden" id="yelog_site_posts_number" value="6">

<div style="display: none">
    <span id="busuanzi_value_site_uv"></span>
    <span id="busuanzi_value_site_pv"></span>
</div>

    </div>
    <div class="nav-right">
        <div class="friends-area">
    <div class="friends-title">
        友情链接
        <i class="iconfont icon-left"></i>
    </div>
    <div class="friends-content">
        <ul>
            
            <li><a target="_blank" href="https://blog.wedaggo.com/">冯义万</a></li>
            
            <li><a target="_blank" href="https://xu-shaoyu.github.io/">徐绍玉</a></li>
            
        </ul>
    </div>
</div>
        <div class="title-list">
    <div class="right-top">
        <div id="default-panel">
            <i class="iconfont icon-search" data-title="搜索 快捷键 i"></i>
            <div class="right-title">全部文章</div>
            <i class="iconfont icon-file-tree" data-title="切换到大纲视图 快捷键 w"></i>
        </div>
        <div id="search-panel">
            <i class="iconfont icon-left" data-title="返回"></i>
            <input id="local-search-input" autocomplete="off"/>
            <label class="border-line" for="input"></label>
            <i class="iconfont icon-case-sensitive" data-title="大小写敏感"></i>
            <i class="iconfont icon-tag" data-title="标签"></i>
        </div>
        <div id="outline-panel" style="display: none">
            <div class="right-title">大纲</div>
            <i class="iconfont icon-list" data-title="切换到文章列表"></i>
        </div>
    </div>

    <div class="tags-list">
    <input id="tag-search" />
    <div class="tag-wrapper">
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>java</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>python</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>前端</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>前端案例</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>工具</a>
            </li>
        
            <li class="article-tag-list-item">
                <i class="iconfont icon-tag"></i><a>爬虫</a>
            </li>
        
    </div>

</div>

    
    <nav id="title-list-nav">
        
        <a  class="全部文章 其它 工具 "
           href="/2021/08/为什么不用gitee.io/"
           data-tag="工具"
           data-author="" >
            <span class="post-title" title="为什么不用gitee.io">为什么不用gitee.io</span>
            <span class="post-date" title="2021-08-19 01:30:00">2021/08/19</span>
        </a>
        
        <a  class="全部文章 爬虫 爬虫总结 "
           href="/2019/01/spider/java爬虫框架jsoup总结和使用/"
           data-tag="java,爬虫"
           data-author="" >
            <span class="post-title" title="java爬虫框架jsoup总结和使用">java爬虫框架jsoup总结和使用</span>
            <span class="post-date" title="2019-01-03 18:51:26">2019/01/03</span>
        </a>
        
        <a  class="全部文章 爬虫 爬虫总结 "
           href="/2019/01/spider/java常用的爬虫框架/"
           data-tag="爬虫,python"
           data-author="" >
            <span class="post-title" title="java常用的爬虫框架">java常用的爬虫框架</span>
            <span class="post-date" title="2019-01-02 18:51:26">2019/01/02</span>
        </a>
        
        <a  class="全部文章 爬虫 爬虫总结 "
           href="/2019/01/spider/为什么选择java爬虫/"
           data-tag="java,爬虫"
           data-author="" >
            <span class="post-title" title="为什么选择java爬虫">为什么选择java爬虫</span>
            <span class="post-date" title="2019-01-01 18:51:26">2019/01/01</span>
        </a>
        
        <a  class="全部文章 其它 工具 "
           href="/2018/06/英语作文模板/"
           data-tag="工具"
           data-author="" >
            <span class="post-title" title="英语作文模板">英语作文模板</span>
            <span class="post-date" title="2018-06-22 01:30:00">2018/06/22</span>
        </a>
        
        <a  class="全部文章 前端 前端案例 "
           href="/2017/12/front/网页自动换肤/"
           data-tag="前端,前端案例"
           data-author="" >
            <span class="post-title" title="网页自动换肤">网页自动换肤</span>
            <span class="post-date" title="2017-12-06 15:24:20">2017/12/06</span>
        </a>
        
        <div id="no-item-tips">

        </div>
    </nav>
    <div id="outline-list">
    </div>
</div>

    </div>
    <div class="hide-list">
        <div class="semicircle" data-title="切换全屏 快捷键 s">
            <div class="brackets first"><</div>
            <div class="brackets">&gt;</div>
        </div>
    </div>
</aside>
<div id="post">
    <div class="pjax">
        <article id="post-front/网页自动换肤" class="article article-type-post" itemscope itemprop="blogPost">
    
        <h1 class="article-title">网页自动换肤</h1>
    
    <div class="article-meta">
        
        
        
        <span class="book">
            <i class="iconfont icon-category"></i>
            
            
            <a  data-rel="前端">前端</a> > 
            
            <a  data-rel="前端&lt;---&gt;前端案例">前端案例</a>
            
        </span>
        
        
        <span class="tag">
            <i class="iconfont icon-tag"></i>
            
            <a class="color3">前端</a>
            
            <a class="color5">前端案例</a>
            
        </span>
        
    </div>
    <div class="article-meta">
        
            发布时间 : <time class="date" title='最后更新: 2021-08-18 18:25:01'>2017-12-06 15:24</time>
        
    </div>
    <div class="article-meta">
        
        
        
    </div>
    
    <div class="toc-ref">
    
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#网页自动换肤"><span class="toc-text">网页自动换肤</span></a></li></ol>
    
<style>
    .left-col .switch-btn,
    .left-col .switch-area {
        display: none;
    }
    .toc-level-5 i,
    .toc-level-5 ol {
        display: none !important;
    }
</style>
</div>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="网页自动换肤"><a href="#网页自动换肤" class="headerlink" title="网页自动换肤"></a>网页自动换肤</h2><pre><code class="python">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;

&lt;body onload=&quot;setcolor()&quot;&gt;
&lt;div id=mydiv style=&quot;font:12px sans-serif;width:30000px;height:20000px;&quot;&gt;背景色测试&lt;/div&gt;
&lt;script&gt;
  function setcolor() {
    var colorString;
    do{
      colorString=&quot;#&quot;+Math.floor(Math.random()*Math.pow(2,24)).toString(16);
     }
    while (colorString.length&lt;7);
      document.getElementById(&quot;mydiv&quot;).style.backgroundColor=colorString;
      setTimeout(setcolor,100);
  }
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

      
       <hr><span style="font-style: italic;color: gray;"> 转载请注明来源，欢迎指出任何有错误或不够清晰的表达。欢迎邮件至 320479069@qq.com </span>
    </div>
</article>


<p>
    <a  class="dashang" onclick="dashangToggle()">赏</a>
</p>






    
        <!-- MathJax配置，可通过单美元符号书写行内公式等 -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
    "HTML-CSS": {
        preferredFont: "TeX",
        availableFonts: ["STIX","TeX"],
        linebreaks: { automatic:true },
        EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
    },
    tex2jax: {
        inlineMath: [ ["$", "$"], ["\\(","\\)"] ],
        processEscapes: true,
        ignoreClass: "tex2jax_ignore|dno",
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
    },
    TeX: {
        equationNumbers: { autoNumber: "AMS" },
        noUndefined: { attributes: { mathcolor: "red", mathbackground: "#FFEEEE", mathsize: "90%" } },
        Macros: { href: "{}" }
    },
    messageStyle: "none"
    });
</script>
<!-- 给MathJax元素添加has-jax class -->
<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>
<!-- 通过连接CDN加载MathJax的js代码 -->
<script type="text/javascript" async
        src="//cdn.jsdelivr.net/npm/mathjax@2.7.8/unpacked/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<input type="hidden" id="MathJax-js"
        value="//cdn.jsdelivr.net/npm/mathjax@2.7.8/unpacked/MathJax.js?config=TeX-MML-AM_CHTML">
</input>
    




    </div>
    <div class="copyright">
        <p class="footer-entry">
    ©2017-2021 CuiYonghua
</p>
    </div>
    <div class="full-toc">
        <button class="full" data-title="切换全屏 快捷键 s"><span class="min "></span></button>
<a class="" id="rocket" ></a>

    </div>
</div>

<div class="hide_box" onclick="dashangToggle()"></div>
<div class="shang_box">
    <a class="shang_close"  onclick="dashangToggle()">×</a>
    <div class="shang_tit">
        <p>喜欢就点赞,疼爱就打赏</p>
    </div>
    <div class="shang_payimg">
        <div class="pay_img">
            <img src="/img/alipay.jpg" class="alipay" title="扫码支持">
            <img src="/img/weixin.jpg" class="weixin" title="扫码支持">
        </div>
    </div>
    <div class="shang_payselect">
        <span><label><input type="radio" name="pay" checked value="alipay">支付宝</label></span><span><label><input type="radio" name="pay" value="weixin">微信</label></span>
    </div>
</div>


</body>
<script src="/js/jquery.pjax.js?v=1.1.0" ></script>

<script src="/js/script.js?v=1.1.0" ></script>
<script>
    var img_resize = 'default';
    function initArticle() {
        /*渲染对应的表格样式*/
        
            $("#post .pjax table").addClass("green_title");
        

        /*渲染打赏样式*/
        
        $("input[name=pay]").on("click", function () {
            if($("input[name=pay]:checked").val()=="weixin"){
                $(".shang_box .shang_payimg .pay_img").addClass("weixin_img");
            } else {
                $(".shang_box .shang_payimg .pay_img").removeClass("weixin_img");
            }
        })
        

        /*高亮代码块行号*/
        
        $('pre code').each(function(){
            var lines = $(this).text().trim().split('\n').length, widther='';
            if (lines>99) {
                widther = 'widther'
            }
            var $numbering = $('<ul/>').addClass('pre-numbering ' + widther).attr("unselectable","on");
            $(this).addClass('has-numbering ' + widther)
                    .parent()
                    .append($numbering);
            for(var i=1;i<=lines;i++){
                $numbering.append($('<li/>').text(i));
            }
        });
        

        /*访问数量*/
        

        /*代码高亮，行号对齐*/
        $('.pre-numbering').css('line-height',$('.has-numbering').css('line-height'));

        
        
        /* 渲染*/
        function HTMLDecode(text) {
            var temp = document.createElement("div");
            temp.innerHTML = text;
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
        if (window.mermaid){
            window.mermaid = null
        }
        $.getScript("//cdn.jsdelivr.net/npm/mermaid@8.4.2/dist/mermaid.min.js", function () {
            var mermaidOptions = JSON.parse(HTMLDecode("{&quot;theme&quot;:&quot;default&quot;,&quot;startOnLoad&quot;:true,&quot;flowchart&quot;:{&quot;useMaxWidth&quot;:true,&quot;htmlLabels&quot;:true}}"))
            if (window.mermaid) {
                mermaid.initialize(mermaidOptions)
                mermaid.contentLoaded()
            }
        })
        
    }

    /*打赏页面隐藏与展示*/
    
    function dashangToggle() {
        $(".shang_box").fadeToggle();
        $(".hide_box").fadeToggle();
    }
    

</script>

<!--加入行号的高亮代码块样式-->

<style>
    pre{
        position: relative;
        margin-bottom: 24px;
        border-radius: 10px;
        border: 1px solid #e2dede;
        background: #FFF;
        overflow: hidden;
    }
    code.has-numbering{
        margin-left: 30px;
    }
    code.has-numbering.widther{
        margin-left: 35px;
    }
    .pre-numbering{
        margin: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        padding: 0.5em 3px 0.7em 5px;
        border-right: 1px solid #C3CCD0;
        text-align: right;
        color: #AAA;
        background-color: ;
    }
    .pre-numbering.widther {
        width: 35px;
    }
</style>

<!--自定义样式设置-->
<style>
    
    
    .nav {
        width: 592px;
    }
    .nav.fullscreen {
        margin-left: -592px;
    }
    .nav-left {
        width: 170px;
    }
    
    
    @media screen and (max-width: 1468px) {
        .nav {
            width: 542px;
        }
        .nav.fullscreen {
            margin-left: -542px;
        }
        .nav-left {
            width: 150px;
        }
    }
    
    
    @media screen and (max-width: 1024px) {
        .nav {
            width: 542px;
            margin-left: -542px
        }
        .nav.fullscreen {
            margin-left: 0;
        }
    }
    
    @media screen and (max-width: 426px) {
        .nav {
            width: 100%;
        }
        .nav-left {
            width: 100%;
        }
    }
    
    
    .nav-right .title-list nav a .post-title, .nav-right .title-list #local-search-result a .post-title {
        color: #383636;
    }
    
    
    .nav-right .title-list nav a .post-date, .nav-right .title-list #local-search-result a .post-date {
        color: #5e5e5f;
    }
    
    
    .nav-right nav a.hover, #local-search-result a.hover{
        background-color: #e2e0e0;
    }
    
    

    /*列表样式*/
    

    /* 背景图样式 */
    
    


    /*引用块样式*/
    

    /*文章列表背景图*/
    
    .nav-right:before {
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background: url("/img/hanguoxiao.gif");
        background-repeat: no-repeat;
        background-position: 50% 0;
        -ms-background-size: cover;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        background-size: cover;
    }
    

    
</style>







</html>
